<template>
  <div class="page community-map-page">
    <div class="task-list">
      <div class="task-item" v-for="(item, index) in taskSwly" @click="viewTaskSwly(item.villageId, item.buildId)">
        <div class="task-icon"></div>
        <div class="task-name">{{ item.buildName }}</div>
        <div class="task-percent"><span class="done">{{ item.allNum - item.nullNum }}</span> / <span class="total">{{ item.allNum }}</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  communityTaskPercent,
  closeCommunityTask,
  discardVillagePosition,
  communityTaskSwlyPercent
} from '@/api/publicline/kdcs'
import { getCurrentLocation } from '@/utils/geo'
import { Toast } from 'vant';
import Vue from "vue";
import {USER_INFO} from "@/store/mutation-types";

export default {
  props: {
    communityInfo: Object
  },
  data() {
    return {
      signed: false,
      finishFlag: false,
      isResponsible: false,
      userId: '',
      confirmShow: false,
      taskPercent: {},
      taskSwly: [],
      signList: {
        zigcs: [],
        khjl: [],
        wlgcs: []
      }
    }
  },
  created() {
    const { communityId, ifBdggz, ifSwly } = this.$route.query;
    this.communityId = communityId;
    this.ifBdggz = ifBdggz
    this.ifSwly = ifSwly
    const userInfo = Vue.ls.get(USER_INFO)
    console.log(userInfo)
    this.userId = userInfo.username
    this.getTaskPercent();
  },
  methods: {
    async getTaskPercent() {
      // 小区任务完成进度
      await communityTaskSwlyPercent( { VILLAGE_ID: this.communityId} )
        .then( res => {
          const data = res.result
          console.log(data)
          this.taskSwly = data
          let numCount = 0
          for (const swly in data) {
            numCount += data[swly].nullNum
          }
          this.finishFlag = numCount === 0
        })
    },
    viewTaskSwly(villageId, buildId) {
      const c = ['小区任务'];
      this.$router.push( {
        path: "/publicline/kdcs/swly-list",
        query: {
          breadcrumb: c.concat(['商务楼宇']).join("/"),
          communityId: villageId,
          ifBdggz: this.ifBdggz,
          buildId: buildId
        }
      } )
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  background: #FFF;
}
.task-list {
  padding: 20px 0;
  min-height: 300px;

  .task-item {
    padding: 6px 16px;
    margin: 14px auto;
    display: flex;
    border: 1px solid #aaa;
    border-radius: 6px;
    width: 70%;
    justify-content: space-between;
    align-items: center;

    &.disabled {
      background: #F3F3F3;
      color: #666;
      border-color: #ccc;
    }

    .task-icon {
      width: 40px;
      height: 40px;
      text-align: left;
    }
    .task-name {
      flex: 1;
    }
    .task-percent {
      width: 100px;
      text-align: right;
    }
  }
}
.community-work-signature {
  width: 80%;
  margin: 0 auto;

  .signature-btn {
    text-align: center;
    padding: 10px 10px;
    background: #0c85ff;
    color: #FFF;
    border-radius: 6px;

    &.disabled {
      background: #EEE;
      color: #777;
      border-color: #ccc;
    }
  }

  .signature-list {
    margin-top: 10px;
    padding: 2px 10px;
    font-size: 13px;
    background: #f8fbff;
    border-radius: 6px;
    color: #666;

    .list-item {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      .item-post {
        width: 88px;
      }
      .item-name {
        width: 50px;
      }
      .item-time {
        width: 150px;
      }
      .item-sign {
        text-align: right;

        &.signed {
          color: #0c85ff
        }
      }
    }
  }
}

.confirm-list {
  padding: 10px 10px;
  font-size: 13px;

  .confirm-item {
    margin-bottom: 6px;

    span {
      font-size: 14px;
      font-weight: bold;
      color: #f00;
    }
  }
}
</style>